<template>
  <div>
    <button @click="showAddBlog=!showAddBlog">新增博客</button>
    <div v-if="showAddBlog">
      标识符：<input v-model="blog.id">
      <br>
      标题：<input v-model="blog.title">
      <br>
      内容：<input v-model="blog.content">
      <br>
      <button @click="addBlog">确认新增</button>
    </div>

    <div v-for="item in list" :key="item.id">
      <h6 @click="showBlog(item)">{{ item.title }}</h6>
    </div>
    <blog-detail v-if="currentBlog" :blog="currentBlog"></blog-detail>
  </div>
</template>

<script>
import axios from 'axios'
import BlogDetail from './BlogDetail'

export default {
  components: { BlogDetail },
  data() {
    return {
      showAddBlog:false,
      list: [],
      currentBlog: {},
      blog:{
        id:"",
        title:"",
        content:""
      }
    }
  },
  
  watch: {
    currentBlog() {
      alert('切换到的博客标题是：' + this.currentBlog.title)
    },
  },
  mounted() {
    axios.get('http://localhost:8081/list').then((response) => {
      this.list = response.data
    })
  },
  methods: {
    showBlog(item) {
      this.currentBlog = item
    },
    addBlog(){
      this.list.push(this.blog);
    }
  },
}
</script>

<style></style>
